<script setup lang="ts">
import { showAircraftTypeView } from '../aircraft-type'
import type { Aircraft } from './types'

const props = defineProps<{
  type: string
  item: Aircraft
}>()

const id = props.item.id
const acType = props.item.aircraftType
const airline = props.item.airline || null

function showAcTypeView() {
  showAircraftTypeView(acType)
}
</script>
<template>
  <div class="aircraft-info">
    <div class="pane-block">
      <div class="row">
        <div class="col-5em">飞机</div>
        <div class="col">{{ id }}</div>
      </div>
      <div class="row">
        <div class="col-5em">机型</div>
        <div class="act-txt" @click="showAcTypeView">{{ acType }}</div>
      </div>
      <div class="row">
        <div class="col-5em">航空公司</div>
        <div class="col">{{ airline || '-' }}</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/map/style/var';
.aircraft-info {
  .act-txt {
    cursor: pointer;
    border-bottom: 1px solid transparent;
    &:hover {
      border-bottom-color: $map-fg;
    }
  }
  //nothing
}
</style>
